<template>
  <x-sub-page :content="'整改通知详情'" @goBack="handleBack" :isFixBtn="true">
    <!-- 基本信息 -->
    <div class="result-affirm" v-loading="pageLoading">
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="整改通知单号">{{ detail.number }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ detail.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="供应商编码">{{ detail.supplierCode }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detail.createName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          selectDictLabel(dictOptions['srm_rectify.state'], detail.state)
        }}</el-descriptions-item>
        <el-descriptions-item label="需要回复日期">{{ replaceDateTime(detail.replyDate) }}</el-descriptions-item>
        <el-descriptions-item label="实际回复时间">{{
          replaceDateTime(detail.actualReplyDate) | emptyVal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="主要问题描述"> {{ detail.description | emptyVal }} </el-descriptions-item>
        <el-descriptions-item label="改进要求">{{ detail.requires | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="整改附件">
          <x-upload :old-file-list="detail.rectifyFileVoList" :edit-flag="false" />
        </el-descriptions-item>
      </el-descriptions>
      <Reject-detail :detail="detail"></Reject-detail>
      <template v-if="detail.srmRectifyEvidenceVoList?.length > 0">
        <el-divider />
        <el-descriptions
          direction="vertical"
          :column="1"
          label-class-name="title-style"
          content-class-name="content-style"
        >
          <el-descriptions-item label="整改证据说明">{{
            detail.srmRectifyEvidenceVoList[0].evidence | emptyVal
          }}</el-descriptions-item>

          <el-descriptions-item label="整改证据">
            <x-upload
              :edit-flag="false"
              ref="rectifyEvidence"
              :old-file-list="detail?.srmRectifyEvidenceVoList || []"
            />
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template v-if="detail.confirm">
        <el-divider />
        <div class="result-title">验收结果</div>
        <el-descriptions
          direction="vertical"
          :column="1"
          label-class-name="title-style"
          content-class-name="content-style"
        >
          <el-descriptions-item label="整改结果">{{
            selectDictLabel(dictOptions['srm_rectify.result'], detail.result)
          }}</el-descriptions-item>
          <el-descriptions-item label="整改情况说明"> {{ detail.confirm | emptyVal }} </el-descriptions-item>
          <el-descriptions-item label="附件">
            <x-upload :old-file-list="detail.srmRectifyResultFileVoList" :edit-flag="false" />
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> 返回 </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>
<script>
  import { QueryDictMixin, replaceDateTime, selectDictLabel } from '@package/utils'
  import { apiGetRectifyInformDetail } from '@/modules/supplier/api/rectifyInform.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import RejectDetail from '../components/rejectDetail.vue'

  export default {
    name: 'RectifyInformDetail',
    components: { RejectDetail },
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        pageLoading: true,
        loading: false,
        detail: {
          number: '',
          supplierCode: '',
          supplierName: '',
          source: '',
          sourceNumber: '',
          replyDate: '',
          actualReplyDate: '',
          description: '',
          requires: '',
          confirm: '',
          result: '',
          createName: '',
          createTime: '',
          state: '',
          rectifyFileVoList: []
        },
        rules: {},
        srmDictKeys: ['srm_rectify.state', 'srm_rectify.source', 'srm_rectify.result']
      }
    },
    computed: {
      rectifyId() {
        return this.$route.query?.rectifyId ?? '1'
      }
    },
    created() {
      this.initDictConfig()
      this.rectifyId && this.init()
    },
    methods: {
      replaceDateTime,
      selectDictLabel,
      async init() {
        try {
          const { data, code } = await apiGetRectifyInformDetail(this.rectifyId)
          if (code === EnumApiCode.Success) {
            this.detail = data
          }
        } finally {
          this.pageLoading = false
        }
      },
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .result-affirm {
    padding: 20px;
    overflow: auto;
    ::v-deep .title-style {
      color: #707683;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .footer {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    .result-title {
      margin-bottom: 20px;
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
  }
</style>
